﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>本例用于测试background-position属性</title>
<style type="text/css">
#body1{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}

.bgc{
float:left;
width:200px;
height:100px;
margin:20px;
padding:10px;
border:2px fuchsia solid;
	}
.mgd{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:2px fuchsia solid;
	overflow:auto;
}
#body2{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}
#body2 div{
	float:left;
	width:200px;
	height:300px;
	margin:20px;
	padding:10px;
	border:2px green solid;
	background-image:url('images/alertpanel_icon.png');
	background-repeat:no-repeat;
	overflow:auto;
}
#bg1{
	background-position:center bottom;
}
#bg2{
	background-position:right;
}
#bg3{
	background-position:10% 10%;
}
#bg4{
	background-position:20%;
}
#bg5{
	background-position:20px 20px;
}
#bg6{
	background-position:50px;
}
#bg7{
	background-position:right 100%;
}
#bg8{
	background-position:center 30px;
}
#bg9{
	background-position:70% bottom;
}
#bg10{
	background-position:30% center;
}
#bg11{
	background-position:50px bottom;
}
#bg12{
	background-position:50px 50%;
}
#body3 .btn{
	width:20px;
	height:20px;
	display:inline-block;
	*zoom:1;
	*display:inline;
	border:1px fuchsia solid;
	cursor:pointer;
	background-image:url('images/alertpanel_icon.png');
	background-repeat:no-repeat;
}
#body3 div.ok{
	background-position:center -98px;
}
#body3 div.no{
	background-position:center -48px;
}
#body3 div.wr{
	background-position:center 2px;
}
</style>
</head>
<body>
<div id="body1">
<div class="bgc">本例用于测试background-position属性</div>
</div>
<div id="body2">
	<div id="bg1">01使用关键词(成对)<br/>top\right\bottom\left\center</div>
	<div id="bg2">02使用关键词(单个)<br/>right\left\center<br/>(即第二个值将是"center")</div>
	<div id="bg3">03使用百分比(成对)x% y%</div>
	<div id="bg4">04使用百分比(单个)x%(即y%=50%)</div>
	<div id="bg5">05使用单位值(成对)<br/>1px 2px</div>
	<div id="bg6">06使用单位值(单个)<br/>即y值为50%</div>
	<div id="bg7">07使用混合值<br/>(关键字+百分比)</div>
	<div id="bg8">08使用混合值<br/>(关键字+单位值)</div>
	<div id="bg9">09使用混合值<br/>(百分比+关键字)</div>
	<div id="bg10">10使用混合值<br/>(百分比+单位值)</div>
	<div id="bg11">11使用混合值<br/>(单位值+关键字)</div>
	<div id="bg12">12使用混合值<br/>(单位值+百分比)</div>
	<div id="bg13">13值inherit不建议使用，IE不支持</div>
</div>
<div>
background-position是背景图相对所属元素的定位。<br/>
提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
</div>
<div>本例同时说明:对于成对值应以空格隔开,而不能使用其他方法</div>
<div id="body3">
<div>使用background-position来制作图片按钮</div>
<div class="btn ok"></div>
<div class="btn no"></div>
<div class="btn wr"></div>
</div>
<div>
本例同时发现:<br/>
block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；<br/>
使用HACK解决：*zoom:1;*display:inline;(但是不完美)
所以inline-block应尽量减少使用。
</div>
</body>
</html>